import React from "react";
import "./index.css"; //引入css
//1.考虑组件的复用 header body 里面的内容 通过组合的方式 随时的变更

//2.点击确定或者点击取消按钮都要关掉Modal匡匡

//3.点击右上角的x也要关闭Modal

//4.需要一个属性来控制modal的显示和隐藏 这个属性的名字就叫做visible

//5.点击取消或者按钮需要提供一个处理函数 然后在处理函数中可以添加自己的代码
class Modal extends React.Component {
  state = {
    isClose: false,//一个开关,用于标记是否点击了x
    isVisible: false,
  };
  //钩子函数 根据props派发出一个新的状态
  static getDerivedStateFromProps(nextProps,nextState) {
    console.log(nextProps); //最新的props
    console.log(nextState)

    //判断是否点了x

    if(nextState.isClose){
        return {
            isVisible:nextState.isVisible,
            isClose:false //把开关复位
        }
    }

    //通过传递过来的Props来派发状态

    return {
      isVisible: nextProps.visible,
    };
  }
  render() {
    //解构props中的属性
    let { title, children, onOk, onCancel, visible } = this.props;
    //从状态中解构
    let { isVisible } = this.state;
    //元素变量
    let el = isVisible ? (
      <div className="modal-container">
        <div className="modal-mask">
          <div className="modal-content">
            <button
              className="close"
              onClick={() => {
                this.setState({
                  isVisible: false,
                  isClose:true //点击了x按钮
                });
              }}
            >
              ×
            </button>
            <div className="header">
              <h3>{title?title:'提示'}</h3>
            </div>
            <div className="body">{children?children:'这里是内容区域...'}</div>
            <div className="footer">
              <button
                onClick={() => {
                  onOk ? onOk() : console.log("没有处理函数");
                }}
                className="confirm"
              >
                确定
              </button>
              <button
                onClick={() => {
                  onCancel ? onCancel() : console.log("没有取消的处理函数");
                }}
                className="cancel"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    ) : null;
    // console.log(onOk);
    // console.log(onCancel);
    return el;
  }
}

export default Modal;
